[V0_FILE]typescriptreact:file="save-button.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Loader2, Check, Sun, Moon } from "lucide-react" import confetti from "canvas-confetti" import { cn } from "@/utils/cn" import "tailwindcss/tailwind.css" export default function SaveButton() { const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle") const [isDark, setIsDark] = useState(false) const handleSave = () => { if (status === "idle") { setStatus("saving") // Simulate saving process setTimeout(() => { setStatus("saved") // Trigger confetti confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) // Reset after 2 seconds setTimeout(() => setStatus("idle"), 2000) }, 2000) } } const toggleTheme = () => { setIsDark(!isDark) document.documentElement.classList.toggle("dark") } // Button variants for different states const buttonVariants = { idle: { backgroundColor: isDark ? "rgb(64, 64, 64)" : "rgb(243, 244, 246)", color: isDark ? "white" : "black", }, saving: { backgroundColor: "rgb(59, 130, 246)", color: "white", }, saved: { backgroundColor: "rgb(34, 197, 94)", color: "white", }, } return (

{status === "idle" && ( )} {status !== "idle" && ( {status === "saving" && ( )} {status === "saved" && ( )} {status === "saving" ? "Saving file" : "File saved"} )}

) } [V0_FILE]typescript:file="utils/cn.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { animation: { flip: "flip 6s infinite steps(2, end)", rotate: "rotate 3s linear infinite both", }, keyframes: { flip: { to: { transform: "rotate(360deg)" }, }, rotate: { to: { transform: "rotate(90deg)" }, }, }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]json:file="package.json" isMerged="true" { "name": "save-button-project", "version": "1.0.0", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "framer-motion": "^10.12.16", "lucide-react": "^0.241.0", "canvas-confetti": "^1.6.0", "clsx": "^1.2.1", "tailwind-merge": "^1.13.2" }, "devDependencies": { "@types/react": "^18.2.12", "@types/react-dom": "^18.2.5", "typescript": "^5.1.3", "tailwindcss": "^3.3.2", "postcss": "^8.4.24", "autoprefixer": "^10.4.14" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import SaveButton from "@/components/SaveButton" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/SaveButton.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Loader2, Check, Sun, Moon, Sparkles } from "lucide-react" import confetti from "canvas-confetti" import { cn } from "@/utils/cn" export default function SaveButton() { const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle") const [isDark, setIsDark] = useState(false) const [bounce, setBounce] = useState(false) const handleSave = () => { if (status === "idle") { setStatus("saving") // Simulate saving process setTimeout(() => { setStatus("saved") setBounce(true) // Trigger confetti confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ff00ff"], shapes: ["star", "circle"], }) // Reset after 2 seconds setTimeout(() => { setStatus("idle") setBounce(false) }, 2000) }, 2000) } } const toggleTheme = () => { setIsDark(!isDark) document.documentElement.classList.toggle("dark") } // Button variants for different states const buttonVariants = { idle: { backgroundColor: isDark ? "rgb(64, 64, 64)" : "rgb(243, 244, 246)", color: isDark ? "white" : "black", scale: 1, }, saving: { backgroundColor: "rgb(59, 130, 246)", color: "white", scale: 1, }, saved: { backgroundColor: "rgb(34, 197, 94)", color: "white", scale: [1, 1.1, 1], transition: { duration: 0.2, times: [0, 0.5, 1], }, }, } const sparkleVariants = { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0 }, } return (

{status === "idle" && ( )} {status === "saving" && ( )} {status === "saved" && ( )} {status === "idle" ? "Save me, please!" : status === "saving" ? "Working on it..." : "Saved! Woohoo!"} {bounce && ( )}

) }

About

Tags

Share

About

Tags

Share

More from adurotimi

More Templates Like This

About

Tags

Share

About

Tags

Share

More from adurotimi

More Templates Like This